<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#but1").click(function () {
                $("p").remove()
            })
            $("#but3").click(function () {
                $("#div1").remove()
            })
            //remove() 方法也可接受一个参数，允许您对被删元素进行过滤
            $("#but4").click(function () {
                $("p").remove(".target")
            })
            $("#but2").click(function () {
                $("#div2").empty()
            })
        })
    </script>
</head>
<body>
<div id="div1" style="height:300px;width:300px;border:1px solid black;background-color:yellow;">
    div文本
    <p>这是一个段落</p>
    <p>这是另一个段落</p>
    <p class="target">这是带有target的段落1</p>
    <p class="target">这是带有target的段落2</p>
    <p class="target">这是带有target的段落3</p>
</div>

<div id="div2" style="height:200px;width:300px;border:1px solid black;background-color:red;">
    <p>这是div子元素1</p>
    <p class="target">这是div子元素2</p>
</div>
<button id="but1">删除p元素</button>
<button id="but3">删除div元素</button>
<button id="but4">删除带有target类的元素</button>
<button id="but2">删除被选元素的子元素</button>
</body>
</html>